<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QuickServer</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<link rel="stylesheet" href="css/uikit.almost-flat.min.css" />
<link rel="stylesheet" href="css/chartist.min.css">
<!-- <link rel="stylesheet" href="css/chartist.custom.css"> -->
<link rel="stylesheet" href="css/custom.css">
<script type="application/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="application/javascript" src="js/uikit.min.js"></script>
<script type="application/javascript" src="js/chartist.min.js"></script>
<script type="application/javascript" src="js/welcome.js"></script>
</head>
<body>
<div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">

    <nav class="tm-navbar uk-navbar uk-navbar-attached">
        <div class="uk-navbar-brand uk-hidden-small">QuickServer <div class="uk-badge uk-badge-success">v0.5.1</div></div>
        <ul class="uk-navbar-nav uk-hidden-small">
            <li class="uk-active">
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="/tests.html">Tests</a>
            </li>
            <li>
                <a href="/docs/index.html" target="_blank">Documents</a>
            </li>
        </ul>

        <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

        <div class="uk-navbar-brand uk-navbar-center uk-visible-small" style="padding: 0 !important; font-size: 16px !important;">QuickServer <span class="uk-badge uk-badge-success">v0.5.1</span></div>
    </nav>

    <div class="uk-grid">
        <div class="uk-width-1-1">
            <div id="init_alert" class="uk-alert uk-alert-success">INIT: GET SERVER STATUS.</div>
            <div id="error_alert" class="uk-alert uk-alert-danger">ERROR: CAN'T GET SERVER STATUS.</div>
            <h2>Node Status <div class="uk-badge uk-badge-warning">realtime - last 60s</div></h2>
        </div>
    </div>

    <div id="chart_last60s_1" class="uk-grid uk-margin-top" data-uk-grid-margin>
        <div class="uk-width-medium-1-2">
            <div class="uk-panel uk-panel-box uk-panel-header">
                <h3 id="last60s_cpu_title" class="uk-panel-title">CPU Load</h3>
                <div id="last60s_cpu" class="ct-chart"></div>
            </div>
        </div>
        <div class="uk-width-medium-1-2">
            <div class="uk-panel uk-panel-box uk-panel-header">
                <h3 id="last60s_mem_title" class="uk-panel-title">MEM Usage</h3>
                <div id="last60s_mem" class="ct-chart"></div>
            </div>
        </div>
    </div>

    <div id="chart_last60s_2" class="uk-grid uk-grid-match" data-uk-grid-margin>
        <div class="uk-width-medium-1-2">
            <div class="uk-panel uk-panel-box uk-panel-header">
                <h3 id="last60s_connects_title" class="uk-panel-title">Connects</h3>
                <div id="last60s_connects" class="ct-chart"></div>
            </div>
        </div>
        <div class="uk-width-medium-1-2">
            <div class="uk-panel uk-panel-box uk-panel-header">
                <h3 id="last60s_jobs_title" class="uk-panel-title">Jobs</h3>
                <div id="last60s_jobs" class="ct-chart"></div>
            </div>
        </div>
    </div>

    <div id="tm-offcanvas" class="uk-offcanvas">
        <div class="uk-offcanvas-bar">
            <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
                <li class="uk-active">
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="/tests.html">Tests</a>
                </li>
                <li>
                    <a href="/docs/index.html" target="_blank">Documents</a>
                </li>
            </ul>
        </div>
    </div>

</div>
</body>
</html>
